<template>
  <div>
    <h1>v-model:钱数{{ money }} {{pageNo}}</h1>
    <hr />
    <!-- props父传子 -->
    <!-- <Child :modelValue="money" @update:modelValue="handler"/> -->
  <!--   v-model组件身上使用
    1.相当于给子组件传递props[modelValue]=10000
    2.相当于给子组件绑定自定义事件update:modelValue -->

    <Child v-model="money" />
    <hr>
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"/>
  </div>
</template>

<script setup lang="ts">
//v-model指令:收集表单数据,数据双向绑定
//v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
//父亲给子组件数据 props
//子组件给父组件数据 自定义事件
//引入子组件
import Child from './Child.vue';
import Child1 from './Child1.vue';
import { ref } from 'vue';
// 父组件的数据
let money = ref(10000);
// 自定义事件的回调
const handler = (num) => {
  // 将来接受子组件传递过来的数据
  console.log(num);
  money.value = num;
};
// 父组件的数据 
let pageNo=ref(1)
let pageSize=ref(3)
</script>

<style scoped>
</style>